<template>
  <div class="app">
  <div class="header">
    <hhh/>
  </div>
  <div class="nav">
    <nnn v-bind:arr="nav"/>
  </div>
  <div class="banner">
    <swiper v-bind:arr="img"/>
  </div>
  <div class="content">
    <div class="content-c">
      <left v-bind:arr="con"/>
      <right/>
    </div>
  </div>
  </div>
</template>

<script>
  import hhh from './components/head'
  import nnn from './components/nav'
  import swiper from './components/swiper'
  import left from './components/content-left'
  import right from './components/content-right'

export default {
  components:{
    hhh,
    nnn,
    swiper,
    left,
    right,
  },
  data(){
    return{
      nav:['推荐' , '排行榜' , '歌曲' , '电台' , '歌手' , '新歌上架'],
      img:[
        'img/tu1.jpg',
        'img/tu2.jpg',
        'img/tu3.jpg',
        'img/tu4.jpg',
        'img/tu5.jpg',
      ],
      con:[
        {
          img:'img/ct1.jpg',
          msg:'我想你了 其实我也很脆弱',
        },
        {
          img:'img/ct2.jpg',
          msg:'如果再给我一次机会你还会选择走吗',
        },
        {
          img:'img/ct3.jpg',
          msg:'燃尽夏日所有荷尔蒙 | 硬地新歌Vol.16',
        },
        {
          img:'img/ct4.jpg',
          msg:'18岁时的朋友，要一起到81岁 #最佳损友#',
        },
        {
          img:'img/ct5.jpg',
          msg:'惊艳满分｜迷人嗓音俘获你的耳朵 入耳沦陷',
        },
        {
          img:'img/ct6.jpg',
          msg:'暴躁学霸，乃是我的同桌！#最佳损友#',
        },
        {
          img:'img/ct7.jpg',
          msg:'[超短翻唱]好听的歌不需要完整版',
        },
        {
          img:'img/ct8.jpg',
          msg:'我爱你，我不爱你',
        },
      ]
    }
  }
}
</script>

<style>
  *{
      margin:0;
      padding:0;
  }
  li{
    list-style:none;
  }
  .header{
    height:80px;
    background:#242424;
  }
  .nav{
    background:#b8130f;
  }
  .banner{
    background:url('../public/img/Snipaste_2021-06-02_20-34-23.jpg');
    background-size:150%;
  }
  .content{
    background:#f5f5f5;
  }
  .content-c{
    width:1000px;
    margin:0 auto;
    display: flex;
  }
</style>